import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import { LoginWrapper, LoginBox, Input, Button } from './style'
import { loginAction } from './actionCreators'

class Login extends PureComponent {

  render() {
    const { disptchLogin, isLogin } = this.props

    if (!isLogin) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder='账号' innerRef={(input) => this.account = input} />
            <Input placeholder='密码' type='password' innerRef={(input) => this.password = input} />
            <Button onClick={() => { disptchLogin(this.account, this.password) }}>登录</Button>
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to='/' />
    }
  }
}

const mapState = (state) => {
  return {
    isLogin: state.getIn(['login', 'islogin'])
  }
}

const mapDisptch = (dispatch) => ({
  disptchLogin(accountElem, passwordElem) {
    dispatch(loginAction(accountElem.value, passwordElem.value))
  }
})

export default connect(mapState, mapDisptch)(Login)
